<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>号码滚动抽奖效果</title>
  <style>
  div{
      height: 18px;
      overflow: hidden;
  }
  ul{
      list-style: none;
      margin: 0;
      position: relative;
      top: 0px;
  }
  </style>
</head>
<body>
  <div>
    <ul>
      <li>13452911111</li>
      <li>13452922222</li>
      <li>13452933333</li>
      <li>13452944444</li>
      <li>13452955555</li>
      <li>13452966666</li>
      <li>13452977777</li>
      <li>13452988888</li>
      <li>13452999999</li>
      <li>13452900000</li>
      <li>13452911351</li>
    </ul>
  </div>
        <h1>按Enter键启动/暂停抽奖</h1>
  <script>
    var oLiHeight = document.getElementsByTagName("li")[0].offsetHeight;
    var speed = 1;
    var oUl = document.getElementsByTagName("ul")[0];
    var roll = false;
    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    function numberRoll(){
      //当ul滚动向上滚动的距离没有超过第一个li的高度的时候.top每次减小speed的高度  反复回调
      if(parseInt(oUl.style.top == "" ? 0 : oUl.style.top) > '-' + oLiHeight){
        oUl.style.top = parseInt(oUl.style.top == "" ? 0 : oUl.style.top) - speed + 'px';

      } else {
        oUl.appendChild(oUl.firstElementChild);
        oUl.style.top = 0;
      }
      if(roll){
        window.requestAnimationFrame(numberRoll);
      } else {
        window.cancelAnimationFrame(numberRoll);
        oUl.style.top = 0;
      }
      
    };
    window.onkeyup = function(key){
      if(key.which == 13){
        console.log("enter");
        if(roll){
          roll = false;                 
        } else {
          roll = true;
          window.requestAnimationFrame(numberRoll);         
        }       
      }
    }
    
  </script>
</body>
</html>